<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">


    <title>{$site.name|htmlentities}</title>

    <link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico" />

    <link href="__CDN__/assets/css/index.css" rel="stylesheet">
    <script rel="stylesheet" src="assets/js/vue.js"></script>
    <script rel="stylesheet" src="assets/libs/axios-1.x/dist/axios.min.js"></script>
    <!-- jquery -->
    <script rel="stylesheet" src="assets/libs/jquery/dist/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="assets/libs/bootstrap/dist/css/bootstrap.min.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script rel="stylesheet" src="assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
</head>

<body>
    <div id="mainbody">
        <div class="container-fluid" id="app">
            <div class="header">
                <div class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <ul class="nav nav-tabs">
                            <li role="presentation" class="active"><a href="#">首页</a></li>
                            <li role="presentation"><a href="#">分类</a></li>
                            <li role="presentation"><a href="#">标签</a></li>
                            <li role="presentation"><a href="#">关于</a></li>
                        </ul>
                    </div>
                    <div class="col-md-4">
                        <form class="navbar-form navbar-left" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="探索">
                            </div>
                            <button type="submit" class="btn btn-default">Submit</button>
                        </form>
                    </div>
                </div>
            </div>
            <div class="body">
                <div class="lunbo flex column between">
                    <div class="name">
                        {{message}}
                    </div>
                    <div class="card flex">
                        {volist name="list" id="vo"}
                        {include file="index/components/card"/}
                        {/volist}
                    </div>
                </div>
                <div class="article">
                    <div class="name">
                        文章列表
                    </div>
                    <div class="gongneng flex between">
                        <div class="paixu flex between">
                            <div class="paixu-left">#</div>
                            <div class="paixu-right" @click="sort()">按发布时间排序</div>
                        </div>
                        <div class="shaixuan flex between">
                            <div class="shaixuan-left">按分类筛选</div>
                            <div class="shaixuan-right">*</div>
                        </div>
                    </div>
                    <div class="card flex">
                        {volist name="alllist" id="vo"}
                        {include file="index/components/card"/}
                        {/volist}
                    </div>
                </div>
            </div>

        </div>
    </div>

</body>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        },
        methods: {
            increase: function () {
                this.count++;
            },
            sort: function () {
                var self = this;
                axios.get('/index.php/index/index/sort', {
                    params: {
                        field: 'createtime',
                        order: 'asc'
                    }
                })
                    .then(function (response) {
                        self.items = response.data;
                        console.log('111')
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }
        }
    })
</script>

<style>
    .container-fluid {
        height: calc(100vh - 61px);
        overflow-y: scroll;
    }

    .header {
        width: 100%;
        height: 98.67px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(243, 244, 246, 1);
    }

    .header .row {
        width: 100%;
        max-width: 1200px;
        /* 设置标题最大宽度 */
        margin: 0 auto;
    }

    .header .navbar-form .form-control {
        display: inline-block;
        width: auto;
        vertical-align: middle;
        border-radius: 30px;
    }

    .lunbo {
        width: 100%;
        height: 645.33px;
        background-color: rgba(63, 110, 182, 1);
        padding: 53.33px 106.67px 53.33px 106.67px;
    }

    .lunbo .name {
        font-size: 32px;
        font-weight: 900;
        line-height: 42.67px;
        color: rgba(0, 0, 0, 1);
    }

    .lunbo .card {
        width: 100%;
        height: 442.67px;
    }

    .article {
        width: 100%;
        padding: 32px 32px 30.67px 32px;
    }

    .article .name {
        font-size: 32px;
        font-weight: 900;
        line-height: 42.67px;
        color: rgba(0, 0, 0, 1);
    }

    .gongneng {
        width: 100%;
        height: 32px;
        margin-top: 30px;
    }

    .paixu {
        width: 194.67px;
        color: rgba(0, 0, 0, 1);
    }

    .shaixuan {
        width: 149.33px;
        color: rgba(0, 0, 0, 1);
    }

    .article .card {
        width: 100%;
        flex-wrap: wrap;
    }

    .item {
        width: 554.67px;
        padding: 21.33px 21.33px 20px 21.33px;
    }

    .card-top {
        width: 100%;
        height: 213.33px;
        background-color: antiquewhite;
    }

    .card-bottom {
        width: 100%;
        height: 188px;
        padding: 21.33px 21.33px 20px 21.33px;
        background: rgba(243, 244, 246, 1);

    }

    .item-title {
        font-size: 26.67px;
        font-weight: 900;
        line-height: 37.33px;
        color: rgba(0, 0, 0, 1);
    }

    .item-content {
        font-size: 21.33px;
        font-weight: 400;
        line-height: 32px;
        color: rgba(55, 65, 81, 1);
    }

    .item-bottom {
        font-size: 21.33px;
        font-weight: 400;
        line-height: 32px;
        color: rgba(0, 0, 0, 1);
    }
</style>

</html>